.page-main {
  // 背景色-light
  --color-bg-light: #ffffff;
  // 背景色-dark
  --color-bg-dark: #0d0f12;

  background: var(--color-bg-outside);

  .setting-theme {
    position: absolute;
    top: -6rem;
    left: -9rem;
  }

  .page-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 8rem;
    display: flex;
    justify-content: center;
    background: var(--color-bg-light);

    .blog-wrapper {
      width: 65%;
      max-width: 46rem;
      padding: 0 var(--margin-x-page);
      z-index: 1;
    }

    .blog-tags-wrapper {
      width: 35%;
      max-width: 24rem;
      padding: 0 var(--margin-x-page);
      transform: translateY(6rem);
      z-index: 1;

      .title {
        margin: 0 var(--margin-x-text-normal);
        margin-bottom: 0.5rem;
        font-size: 1rem;
        font-weight: bold;
        color: var(--color-text-decorate);
      }

      .tag-box {
        margin: 0 0.625rem;

        .button-tag-right-in {
          display: inline-block;
        }
      }
    }
  }

  .page-content::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-bg-dark);
    opacity: 0;
    transition: all var(--time-transition-theme);
  }
}

@media (max-width: 54rem) {
  .page-main {
    .page-content {
      .blog-wrapper {
        width: 100%;
      }
      .blog-tags-wrapper {
        display: none;
      }
    }
  }
}

[data-theme='dark'] {
  .page-main .page-content::after {
    opacity: 1;
  }
}
